<template>
  <div class="goodsSet">
    <div class="tabs">
      <el-tabs
        v-model="config.goods_show_type"
        :stretch="true"
        @tab-click="switchShowType"
      >
        <el-tab-pane label="商品" name="goods"></el-tab-pane>
        <el-tab-pane label="商品分组" name="goodsGroup"></el-tab-pane>
      </el-tabs>
    </div>

    <div class="deco-control-group">
      <template v-if="config.goods_show_type === 'goods'">
        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">添加商品</div>
          </div>
          <div class="deco-control-group__content">
            <el-radio-group v-model="config.goods_from" size="mini">
              <el-radio :label="0">商品</el-radio>
              <el-radio :label="1">选择分组</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div
          class="deco-control-group-container goods"
          v-if="!config.goods_from"
        >
          <div
            v-if="goods"
            class="deco-control-group__content"
            style="justify-content: flex-start;"
          >
            <div class="deco-editor-card">
              <draggable :list="goods" :animation="200" style="float:left">
                <div
                  class="deco-editor-card-item"
                  v-for="(goods, index) in goods"
                  :key="index"
                >
                  <div class="design-component-goods-item" draggable="false">
                    <a
                      :href="goods.url"
                      class="image-url"
                      target="_blank"
                      draggable="false"
                    >
                      <img
                        :src="goods.pictureUrl"
                        alt="商品图"
                        draggable="false"
                      />
                    </a>
                  </div>
                  <i
                    class="el-icon-error deleteicon"
                    @click="deleteGoods(index)"
                  ></i>
                </div>
              </draggable>
              <div class="deco-editor-card-add" @click="openGoods">
                <i class="el-icon-plus deco-editor-card-add-icon"></i>
              </div>
            </div>
          </div>
          <div v-else class="deco-help-desc-error">请添加商品</div>
        </div>
        <div class="deco-control-group-container" v-else>
          <el-button>选择商品分组</el-button>
        </div>
      </template>
      <template v-else>
        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">添加商品分组</div>
            <div class="deco-control-group__value">最多添加15个商品分组</div>
          </div>
        </div>
        <div class="group-wrap">
          <!-- 商品分组 -->
          <draggable
            :list="config.goods_list"
            class="list-group"
            :animation="200"
          >
            <div
              class="list-group-item"
              v-for="(item, index) in config.goods_list"
              :key="index"
            >
              <div class="item-content">
                <el-form ref="form" label-width="85px">
                  <el-form-item
                    label="商品来源"
                    class="formItem"
                    style="margin-bottom:5px;"
                  >
                    <a href="">{{ item.sourceName }}</a>
                  </el-form-item>
                  <el-form-item
                    label="菜单名称"
                    class="formItem"
                    style="margin-bottom:5px;"
                  >
                    <el-input size="mini" v-model="item.name" :maxlength="10" />
                  </el-form-item>
                  <el-form-item label="显示个数" class="formItem">
                    <el-input-number
                      size="mini"
                      v-model="item.count"
                      :min="1"
                      :controls="false"
                    />
                  </el-form-item>
                </el-form>
              </div>

              <div v-if="config.goods_list.length>2" class="item-delete" @click="deleteGroupItem(index)">
                <i class="el-icon-error"></i>
              </div>
            </div>
          </draggable>
          <div class="list-group">
            <div class="list-group-item" style="padding:0;">
              <div class="edit-add" @click="addGroup">添加商品分组</div>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">展示模板</div>
            <div class="deco-control-group__value">
              {{ config.goods_nav_type ? '左侧菜单' : '顶部菜单' }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-radio-group v-model="config.goods_nav_type" size="medium">
              <el-radio-button label="top">
                <i class="el-icon-s-grid"></i>
              </el-radio-button>
              <el-radio-button label="left">
                <i class="el-icon-s-grid"></i>
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <template v-if="config.goods_nav_type === 'top'">
          <div class="deco-control-group-container">
            <div class="deco-control-group__header">
              <div class="deco-control-group__label">全部分组</div>
              <div class="deco-control-group__value">
                {{ config.goods_nav_all ? '展示' : '不展示' }}
              </div>
            </div>
            <div class="deco-control-group__content">
              <el-checkbox v-model="config.goods_nav_all"></el-checkbox>
            </div>
          </div>

          <div class="deco-control-group-container">
            <div class="deco-control-group__header">
              <div class="deco-control-group__label">菜单样式</div>
              <div class="deco-control-group__value">
                样式{{ config.goods_nav_mode }}
              </div>
            </div>
            <div class="deco-control-group__content">
              <el-radio-group v-model="config.goods_nav_mode" size="medium">
                <el-radio-button :label="1">
                  <i class="el-icon-s-grid"></i>
                </el-radio-button>
                <el-radio-button :label="2">
                  <i class="el-icon-s-grid"></i>
                </el-radio-button>
                <el-radio-button :label="3">
                  <i class="el-icon-s-grid"></i>
                </el-radio-button>
              </el-radio-group>
            </div>
          </div>

          <div class="deco-control-group-container">
            <div class="deco-control-group__header">
              <div class="deco-control-group__label">菜单位置</div>
              <div class="deco-control-group__value">
                {{ config.goods_nav_pos ? '正常模式' : '顶部固定' }}
              </div>
            </div>
            <div class="deco-control-group__content">
              <el-radio-group v-model="config.goods_nav_pos" size="medium">
                <el-radio-button :label="0">
                  <i class="el-icon-s-grid"></i>
                </el-radio-button>
                <el-radio-button :label="1">
                  <i class="el-icon-s-grid"></i>
                </el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <el-divider></el-divider>
      </template>

      <template v-if="config.goods_nav_type !== 'left'">
        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">列表样式</div>
            <div class="deco-control-group__value">
              {{ listStyles[config.goods_list_style] }}
            </div>
          </div>
        </div>
        <div class="deco-control-group-container">
          <el-radio-group v-model="config.goods_list_style" size="medium">
            <el-radio-button :label="0">
              <i class="el-icon-s-grid"></i>
            </el-radio-button>
            <el-radio-button :label="1">
              <i class="el-icon-s-grid"></i>
            </el-radio-button>
            <el-radio-button :label="2">
              <i class="el-icon-s-grid"></i>
            </el-radio-button>
            <el-radio-button :label="3">
              <i class="el-icon-s-grid"></i>
            </el-radio-button>
            <el-radio-button :label="4">
              <i class="el-icon-s-grid"></i>
            </el-radio-button>
            <el-radio-button :label="5">
              <i class="el-icon-s-grid"></i>
            </el-radio-button>
          </el-radio-group>
        </div>
      </template>

      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">商品样式</div>
        </div>
      </div>
      <div class="deco-control-group-container">
        <el-radio-group v-model="config.goods_border_style" size="small">
          <el-radio-button :label="0">无边白底</el-radio-button>
          <el-radio-button :label="1">卡片投影</el-radio-button>
          <el-radio-button :label="2">描边白底</el-radio-button>
          <el-radio-button :label="3">无边透明底</el-radio-button>
        </el-radio-group>
      </div>

      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">商品倒角</div>
          <div class="deco-control-group__value">
            {{ config.display_scale ? '圆角' : '直角' }}
          </div>
        </div>
        <div class="deco-control-group__content">
          <el-radio-group v-model="config.display_scale" size="mini">
            <el-radio-button :label="0">
              <i class="el-icon-s-grid"></i>
            </el-radio-button>
            <el-radio-button :label="1">
              <i class="el-icon-s-grid"></i>
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">图片比例</div>
        </div>
        <div class="deco-control-group__content">
          <el-radio-group v-model="config.image_scale" size="small">
            <el-radio-button :label="0">1:1</el-radio-button>
            <el-radio-button :label="1">3:2</el-radio-button>
            <el-radio-button :label="2">3:4</el-radio-button>
            <el-radio-button :label="3">16:9</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">图片填充</div>
        </div>
        <div class="deco-control-group__content">
          <el-radio-group v-model="config.image_fill_style" size="small">
            <el-radio-button :label="0">填充</el-radio-button>
            <el-radio-button :label="1">周边留白</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">文本样式</div>
          <div class="deco-control-group__value">
            {{ config.text_weight === 'normal' ? '常规体' : '加粗体' }}
          </div>
        </div>
        <div class="deco-control-group__content">
          <el-radio-group v-model="config.text_weight" size="mini">
            <el-radio-button label="normal">
              <span class="my-iconfont icon-icon_rta_bb"></span>
            </el-radio-button>
            <el-radio-button label="bold">
              <span class="my-iconfont icon-icon_rt_ba"></span>
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">页面边距</div>
        </div>
        <div class="deco-control-group__content">
          <el-slider
            v-model="config.page_margin"
            style="width:160px;margin-right:10px;"
          ></el-slider>
          <el-input-number
            size="small"
            style="width:60px;"
            v-model="config.page_margin"
            :min="1"
            :controls="false"
          ></el-input-number>
        </div>
      </div>

      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">商品间距</div>
        </div>
        <div class="deco-control-group__content">
          <el-slider
            v-model="config.goods_margin"
            style="width:160px;margin-right:10px;"
          ></el-slider>
          <el-input-number
            size="small"
            style="width:60px;"
            v-model="config.goods_margin"
            :min="1"
            :controls="false"
          ></el-input-number>
        </div>
      </div>

      <el-divider></el-divider>
      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">商品名称</div>
          <div class="deco-control-group__value">
            {{ config.show_title ? '显示' : '不显示' }}
          </div>
        </div>
        <div class="deco-control-group__content">
          <el-checkbox v-model="config.show_title"></el-checkbox>
        </div>
      </div>

      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">商品描述</div>
          <div class="deco-control-group__value">
            {{ config.show_sub_title ? '显示' : '不显示' }}
          </div>
        </div>
        <div class="deco-control-group__content">
          <el-checkbox v-model="config.show_sub_title"></el-checkbox>
        </div>
      </div>

      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">商品价格</div>
          <div class="deco-control-group__value">
            {{ config.show_origin_price ? '显示' : '不显示' }}
          </div>
        </div>
        <div class="deco-control-group__content">
          <el-checkbox v-model="config.show_origin_price"></el-checkbox>
        </div>
      </div>
      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">购买按钮</div>
          <div class="deco-control-group__value">
            {{ config.show_buy_btn ? '显示' : '不显示' }}
          </div>
        </div>
        <div class="deco-control-group__content">
          <el-checkbox v-model="config.show_buy_btn"></el-checkbox>
        </div>
      </div>
      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">商品角标</div>
          <div class="deco-control-group__value">
            {{ config.show_corner_mark ? '显示' : '不显示' }}
          </div>
        </div>
        <div class="deco-control-group__content">
          <el-checkbox v-model="config.show_corner_mark"></el-checkbox>
        </div>
      </div>
    </div>
    <!-- 商品分组选择弹窗 -->
    <el-dialog
      custom-class="add-dialog"
      title="商品分组"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :visible.sync="groupDialogVisible"
      center
    >
      <el-row style="margin-bottom:20px;">
        <el-col :span="16">
          <el-button @click="groupManage">管理分组</el-button>
          <el-button @click="refresh">刷新</el-button>
        </el-col>
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="goodsSearchKey"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchGoods"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
      <simple-table
        :tableCol="groupsCol"
        :border="false"
        :canSelect="true"
        @signle-select="changeSection"
        :tableData="groupsData"
        ref="goodsTable"
      >
      </simple-table>
      <Paging
        ref="paging"
        :total="total"
        :pageSize="pageSize"
        @page-change="pageChange"
      ></Paging>
      <div class="btnBox">
        <el-button @click="groupDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确定</el-button>
      </div>
    </el-dialog>
    <!-- 商品选择弹窗 -->
    <el-dialog
      custom-class="add-dialog"
      title="已上架商品"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :visible.sync="goodsDialogVisible"
      center
    >
      <el-row style="margin-bottom:20px;">
        <el-col :span="16">
          <el-button @click="newGoods">新建</el-button>
          <el-button @click="draftManage">草稿管理</el-button>
          <el-button @click="refresh">刷新</el-button>
        </el-col>
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="goodsSearchKey"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchGoods"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
      <simple-table
        :tableCol="goodsCol"
        :border="false"
        :canSelect="true"
        @signle-select="changeSection"
        :tableData="goodsData"
        ref="goodsTable"
      >
        <el-table-column label="标题" align="left" slot="title">
          <template slot-scope="scope">
            <div style="display:flex;align-items:center;">
              <img
                :src="scope.row.pictureUrl"
                style="width: 50px;height: 50px;"
              />
              <a
                style="color:#155bd4;text-decoration:none;margin-left:10px;"
                :href="createUrl(scope.row)"
                target="_blank"
                >{{ scope.row.productName }}</a
              >
            </div>
          </template>
        </el-table-column>
      </simple-table>
      <Paging
        ref="paging"
        :total="total"
        :pageSize="pageSize"
        @page-change="pageChange"
      ></Paging>

      <div class="btnBox">
        <el-button @click="goodsDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Paging from './paging'
import SimpleTable from './simpleTable'

import draggable from 'vuedraggable'

export default {
  components: { Paging, SimpleTable, draggable },
  props: ['value'],
  data() {
    return {
      listStyles: [
        '大图模式',
        '一行两个',
        '一行三个',
        '详细列表',
        '一大两小',
        '横向滑动'
      ],
      goodsCol: [
        { slot: 'title' },
        { prop: 'createTime', label: '创建时间', width: 200 }
      ],
      goodsData: [],
      defaultGroup: [
        {
          id: 1,
          sourceName: '分组1',
          name: '分组1',
          count: 3,
          createTime: '2020/02/15'
        },
        {
          id: 2,
          sourceName: '分组2',
          name: '分组2',
          count: 6,
          createTime: '2020/05/19'
        }
      ],
      defaultGood: [
        {
          number: '',
          pictureUrl:
            'https://img.yzcdn.cn/upload_files/2018/01/22/FnlHRufXMtUI_AbAEP0tux_nDL1T.png',
          origin: '',
          salePrice: '1.00',
          productDescribe: '这里显示商品名称，最多显示1行',
          productName: '这里显示商品名称，最多显示1行'
        },
        {
          number: '',
          pictureUrl:
            'https://img.yzcdn.cn/upload_files/2018/01/22/FnlHRufXMtUI_AbAEP0tux_nDL1T.png',
          origin: '',
          salePrice: '1.00',
          productDescribe: '这里显示商品名称，最多显示1行',
          productName: '这里显示商品名称，最多显示1行'
        }
      ],
      selectGoods: [],
      goods: [],
      goodsSearchKey: '',
      total: 0,
      pageSize: 10,
      pageIndex: 1,
      goodsDialogVisible: false,
      config: this.value ? this.value : {},
      groupDialogVisible: false,
      selectGroups: [],
      groupsData: [
        {
          id: 1,
          sourceName: '分组1',
          name: '分组1',
          count: 3,
          createTime: '2020/02/15'
        },
        {
          id: 2,
          sourceName: '分组2',
          name: '分组2',
          count: 6,
          createTime: '2020/05/19'
        }
      ],
      groupsCol: [
        { prop: 'name', label: '分组名称' },
        { prop: 'count', label: '商品数量' },
        { prop: 'createTime', label: '创建时间', width: 200 }
      ]
    }
  },
  watch: {
    value(newVal) {
      this.config = newVal
    },
    config(newVal, oldVal) {
      this.$emit('input', newVal)
    },
    goods(newVal, oldVal) {
      if (newVal.length == 0) {
        this.config.goods = this.defaultGood
      } else {
        this.config.goods = newVal
      }
    },
    'config.goods_list': function(newVal) {
      // 查询第一个分组的所有产品
      this.searchGroupGoods(newVal)
    }
  },
  methods: {
    deleteGroupItem(index){
      this.config.goods_list.splice(index,1);
    },
    switchShowType(val) {
      // 默认添加两个分组
      if (val.name === 'goodsGroup') {
        this.config.goods_list = JSON.parse(JSON.stringify(this.defaultGroup))
        // this.searchGroupGoods(this.config.goods_list)
      }
    },
    // 管理分组
    groupManage() {},
    addGroup() {
      this.groupDialogVisible = true
    },
    deleteGoods(index) {
      this.goods.splice(index, 1)
      // this.setConfigGood()
      // this.config.goods.splice(index, 1)
    },
    openGoods() {
      this.netGetGoods()
      this.goodsDialogVisible = true
      this.selectGoods = []
      this.$nextTick(() => {
        this.$refs.goodsTable.$refs.mytables.clearSelection()
      })
    },

    createUrl(item) {
      return '' + item.number
    },
    changeSection(val) {
      if (this.groupDialogVisible) {
        this.selectGroups = val
      } else {
        this.selectGoods = val
      }
    },
    netGetGoods() {
      const data = {
        Name: this.goodsSearchKey,
        // ShopNumber: localStorage.user.shopNumber,
        Status: 2,
        Paging: {
          PageSize: this.pageSize,
          PageIndex: this.pageIndex
        }
      }
      this.http({
        url: this.api.GoodsApi.GetGoodsList,
        method: 'post',
        data
      }).then(res => {
        if (res) {
          if (res.paging) {
            this.total = res.paging.Go_RowsCount
          }
          this.goodsData = res.data
        }
      })
    },
    searchGoods() {
      this.pageIndex = 1
      this.netGetGoods()
    },
    newGoods() {},
    draftManage() {},
    refresh() {},
    pageChange(page) {
      this.pageIndex = page
      if (this.groupDialogVisible) {
      } else {
        this.netGetGoods()
      }
    },
    async searchGroupGoods(newVal) {
      const mode = {
        browseCount: 0,
        categoryId: 12,
        createTime: '2020-06-04 10:37:20',
        disCommisionType: 0,
        distributionCommision: 103.84,
        extraCommision: 0,
        headCommision: 103.84,
        leaderCommision: 103.84,
        modifyTime: '2020-06-04 10:37:20',
        number: '200604000936',
        onSaleTime: '2020-06-04 10:32:49',
        onSaleTye: 1,
        pictureUrl:
          'http://dzxztest.dongzouxizou.com/202006041034102434153592.png',
        productDescribe:
          '【直播福利丨领券200】仅1098抢原价2000+御青城别墅豪华三卧独栋别墅含6人早餐+6人水疗中心门票',
        productName: '御青城别墅直播',
        saleCount: 0,
        salePrice: 1298,
        shopName: '18200110003',
        // shopNumber: 10168,
        sort: 0,
        status: 2,
        stockCount: 100,
        type: 3,
        typeName: '酒店产品(无需物流)',
        visitorCount: 0
      }

      // 根据分组id查询商品并添加
      this.goods = []
      for (let i = 0; i < newVal[0].count; i++) {
        this.goods.push(mode)
      }
    },
    confirmAdd() {
      if (this.groupDialogVisible) {
        // 添加商品分组
        this.config.goods_list = this.config.goods_list.concat(
          this.selectGroups
        )
        this.groupDialogVisible = false
      } else {
        // this.goods.concat(this.selectGoods)
        this.selectGoods.forEach(item => {
          this.goods.push(item)
        })
        // this.setConfigGood()
        // this.config.goods = this.config.goods.concat(this.selectGoods)
        this.goodsDialogVisible = false
      }
    }
    // setConfigGood() {
    //   if (this.goods.length == 0) {
    //     this.config.goods = this.defaultGood
    //   } else {
    //     this.config.goods = this.goods
    //   }
    // }
  },
  created() {
    // console.log(this.config.text_weight)
    if (this.config.goods) {
      this.config.goods.forEach(item => {
        if (!item.isTest) {
          this.goods.push(item)
          this.selectGoods.push(item)
        }
      })
    }
  }
}
</script>

<style lang="less">
@import '../style/iconfont.css';
@import './common.less';
.goodsSet {
  .tabs {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  }
  .deco-editor-card-item,
  .deco-editor-card-add {
    position: relative;
    float: left;
    flex-direction: column;
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 5px 10px 5px 0;
    border: none;
    box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
    cursor: pointer;
    .deco-editor-card-add-icon {
      position: absolute;
      top: 50%;
      left: 25px;
      transform: translate(-50%, -50%);
      color: #155bd4;
    }
    .image-url {
      outline: none;
      position: relative;
      display: inline-block;
      height: 100%;
      width: 100%;
      vertical-align: middle;
      text-align: center;
      line-height: 50px;
      font-size: 0;
      img {
        display: inline-block;
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
      }
    }
  }
  .deco-editor-card-item:after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #155bd4;
    border-radius: 2px;
    z-index: 1;
    pointer-events: none;
    visibility: hidden;
  }
  .deco-editor-card-item:hover {
    &:after {
      visibility: visible;
    }
    .deleteicon {
      visibility: visible;
    }
  }
  .deco-help-desc-error {
    color: #d40000;
  }
  .deleteicon {
    position: absolute;
    cursor: pointer;
    font-size: 20px;
    right: -10px;
    top: -10px;
    color: #bbb;
    background: #fff;
    border-radius: 50%;
    visibility: hidden;
    z-index: 2;
  }
  .goods {
    background: #f7f8fa;
  }
}
</style>
